<template>
  <div class="cart">
    <!-- 导航栏 -->
    <van-nav-bar title="购物车" fixed />

    <div class="cart-content">
      <!-- 购物车商品列表 -->
      <div v-if="cartItems.length > 0" class="cart-list">
        <van-checkbox-group v-model="selectedItemIds">
          <div v-for="item in cartItems" :key="item.id" class="cart-item">
            <van-checkbox :name="item.id" @change="toggleSelect(item.id)">
              <div class="item-content">
                <img :src="item.product.image" alt="商品图片" class="item-img" />
                <div class="item-info">
                  <h4 class="item-title">{{ item.product.title }}</h4>
                  <div class="item-price">¥{{ item.product.price }}</div>
                  <div class="item-controls">
                    <van-stepper
                      v-model="item.quantity"
                      min="1"
                      @change="updateQuantity(item.id, $event)"
                    />
                    <van-button
                      type="danger"
                      size="mini"
                      @click="removeItem(item.id)"
                      class="remove-btn"
                    >
                      删除
                    </van-button>
                  </div>
                </div>
              </div>
            </van-checkbox>
          </div>
        </van-checkbox-group>
      </div>

      <!-- 空购物车状态 -->
      <van-empty
        v-else
        description="购物车空空如也"
        image="cart-o"
        class="empty-cart"
      >
        <van-button type="primary" @click="goShopping">去逛逛</van-button>
      </van-empty>
    </div>

    <!-- 底部结算栏 -->
    <div v-if="cartItems.length > 0" class="cart-footer">
      <div class="footer-left">
        <van-checkbox
          v-model="isAllSelected"
          @change="toggleSelectAll"
        >
          全选
        </van-checkbox>
        <span class="selected-count">已选{{ selectedCount }}件</span>
      </div>
      <div class="footer-right">
        <div class="total-price">
          合计: <span class="price">¥{{ totalPrice }}</span>
        </div>
        <van-button
          type="primary"
          :disabled="selectedCount === 0"
          @click="checkout"
          class="checkout-btn"
        >
          结算({{ selectedCount }})
        </van-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useCartStore } from '@/stores/cart'
import { showToast, showConfirmDialog } from 'vant'

const router = useRouter()
const cartStore = useCartStore()

// 从store获取数据
const {
  items: cartItems,
  selectedItems,
  selectedCount,
  totalPrice,
  updateQuantity: storeUpdateQuantity,
  removeFromCart,
  toggleSelect,
  selectAll
} = cartStore

// 选中的商品ID列表
const selectedItemIds = ref<number[]>([])

// 是否全选
const isAllSelected = computed({
  get: () => cartItems.length > 0 && selectedItems.length === cartItems.length,
  set: (value: boolean) => selectAll(value)
})

// 更新商品数量
const updateQuantity = (itemId: number, quantity: number) => {
  storeUpdateQuantity(itemId, quantity)
}

// 删除商品
const removeItem = async (itemId: number) => {
  try {
    await showConfirmDialog({
      title: '确认删除',
      message: '确定要删除这件商品吗？'
    })
    removeFromCart(itemId)
    showToast('删除成功')
  } catch {
    // 用户取消删除
  }
}

// 切换全选
const toggleSelectAll = (checked: boolean) => {
  selectAll(checked)
}

// 结算
const checkout = () => {
  if (selectedCount.value === 0) {
    showToast('请选择要结算的商品')
    return
  }
  
  showToast(`结算${selectedCount.value}件商品，总价¥${totalPrice.value}`)
  // 这里可以跳转到结算页面
}

// 去购物
const goShopping = () => {
  router.push({ name: 'Home' })
}
</script>

<style scoped>
.cart {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f8f8f8;
}

.cart-content {
  flex: 1;
  padding-top: 46px;
  padding-bottom: 60px;
  overflow-y: auto;
}

.cart-list {
  background: white;
}

.cart-item {
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.item-content {
  display: flex;
  gap: 12px;
}

.item-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.item-title {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #333;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.item-price {
  font-size: 16px;
  color: #ff4444;
  font-weight: 600;
  margin-bottom: 8px;
}

.item-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.remove-btn {
  margin-left: 12px;
}

.empty-cart {
  padding: 60px 0;
}

.cart-footer {
  position: fixed;
  bottom: 50px;
  left: 0;
  right: 0;
  background: white;
  padding: 12px 16px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.selected-count {
  font-size: 14px;
  color: #666;
}

.footer-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.total-price {
  font-size: 14px;
  color: #333;
}

.price {
  font-size: 18px;
  color: #ff4444;
  font-weight: 600;
}

.checkout-btn {
  min-width: 100px;
}
</style>